<section class="flex-shrink-0 p-0 left tree-sider">
  <div class="m-[10px]">
    <eo-ng-input-group [nzPrefix]="prefixTemplateUser" class="!rounded-full">
      <input type="text" eo-ng-input class="flex-1 w-full px-3" i18n-placeholder="@@Search" placeholder="Search" [(ngModel)]="keyword" />
    </eo-ng-input-group>
    <ng-template #prefixTemplateUser
      ><svg class="iconpark-icon">
        <use href="#search"></use></svg
    ></ng-template>
  </div>
  <!-- Fixed Group -->
  <eo-ng-tree-default
    [nzData]="treeNodes"
    [nzSelectedKeys]="nzSelectedKeys"
    #apiGroup
    [nzHideUnMatched]="true"
    (nzClick)="clickTreeItem($event)"
    nzBlockNode
    [nzTreeTemplate]="nzTreeTemplate"
  ></eo-ng-tree-default>
  <ng-template #nzTreeTemplate let-node let-origin="origin">
    <div class="pl-[18px] w-full">
      <div class="flex items-center tree-node" *ngIf="!node.origin?.isFixed && node.isLeaf">
        <eo-iconpark-icon *ngIf="node.icon" [name]="node.icon" class="mr-2 h-[14px] mt-[-4px]"></eo-iconpark-icon>
        <span class="truncate node_title">{{ node.title }}</span>
      </div>
    </div>
  </ng-template>
</section>
<section class="flex-1 min-w-0">
  <eo-extension-list
    *ngIf="!hasExtension"
    [keyword]="keyword"
    [type]="selectGroup"
    (selectChange)="selectExtension($event)"
  ></eo-extension-list>
  <eo-extension-detail *ngIf="hasExtension" [extensionData]="getExtension" (goBack)="selectExtension()"></eo-extension-detail>
</section>
